<html>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <head>

  </head>
  <body>
    <div id="app-7">
      <p>Original message: "{{ message }}"</p>

      <p>reversed  message: "{{ reversedMessage }}"</p>

      <p>  testMessage: "{{ testMessage }}"</p>

      <input v-model="message" />

      <div v-bind:class="[
      activeClass, errorClass,
      {
        'isNews':loading
      }
      ]">
      fffff</div>
     
    </div>

    <div id="mount-point"></div>
  </body>
  <script>


var app7 = new Vue({
  el: '#app-7',
  data: {
    message: 'Hello',
    name:"haaaa",
    activeClass:"hhh",
    errorClass:'dddd',
    loading:true
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('') 
    },
    testMessage(){
      return this.name +'ddddd' 
    }
  },
  watch:{
    message:function(newVal,oldVal){
      console.log('newVal:', newVal)
            console.log('oldVal:', oldVal)
    }
  }
})

console.log('vmsss',app7)

var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')


// 在 _watcher 中 有 deps
// 每个dep 代表一个属性的依赖(new vue 的options 中watch 也在其中)
// 每个dep 中有个 subs 数组 代表当属性变化时候 应该通知哪些 观察者

// _computedWatchers 是 computed 的watch



  </script>
</html>